<template>
	<navigatorComp title="家族族谱" bgcColor="#121512" fontColor="#fff">
		<!-- <template #rightWrap v-if="clanList.length > 0">
			<view class="edit" @click="goUrl('/subPages/home/clan/create_clan')">新建族谱</view>
		</template> -->
	</navigatorComp>

	<mescroll-uni
		:height="height + 'px'"
		:down="downOption"
		:up="upOption"
		@init="mescrollInit"
		@down="myDownCallback"
		@up="upCallback"
	>
		<!-- 空图 -->
		<view class="clan_empty_box" v-if="clanList.length === 0">
			<image
				src="http://112.124.50.179:8888/imgs/home/clan_empty.png"
				class="empty_img"
			></image>
			<view class="empty_tip">
				家族族谱承载着血脉相连的记忆，记录时代变迁,增
				<br />
				强身份认同,传承家族文化，是连接过去与未来的纽
				<br />
				带。创建家谱，成为家族撰谱人吧！
			</view>
			<myButton
				:width="'558rpx'"
				name="创建族谱，成为家族撰谱人"
				@clickBtn="goUrl('/subPages/home/clan/create_clan')"
				style="margin: 56rpx 0 0 0"
			>
				<image
					class="add_memory_image"
					src="http://112.124.50.179:8888/imgs/home/add_memory.png"
					mode=""
				></image>
			</myButton>
			<myButton
				:width="'558rpx'"
				name="填写族谱邀请码，成为家族成员"
				@clickBtn="openInviteCodePopup"
				style="
					margin: 56rpx 0 0 0;
					background-color: transparent;
					color: #f3e0bb;
				"
			></myButton>
		</view>

		<view class="clanList_box">
			<view class="clanItem" v-for="(item, index) in clanList">
				<image
					@click="showMore(item)"
					class="clanItem_more"
					src="http://112.124.50.179:8888/imgs/home/white_more.png"
					mode=""
				></image>
				<view class="display_flex" style="justify-content: flex-start">
					<view class="imgBox">
						<image
							v-if="item.frontCoverUrl == 1"
							src="http://112.124.50.179:8888/imgs/home/clan_1.png"
						></image>
						<image
							v-if="item.frontCoverUrl == 2"
							src="http://112.124.50.179:8888/imgs/home/clan_2.png"
						></image>
						<image
							v-if="item.frontCoverUrl == 3"
							src="http://112.124.50.179:8888/imgs/home/clan_3.png"
						></image>
						<image
							v-if="item.frontCoverUrl == 4"
							src="http://112.124.50.179:8888/imgs/home/clan_4.png"
						></image>
						<image
							v-if="item.frontCoverUrl == 5"
							src="http://112.124.50.179:8888/imgs/home/clan_5.png"
						></image>
						<view
							:class="['imgText', item.genealogySurname.length === 2 && 'fuxinText']"
						>
							{{ item.genealogySurname }}氏家族
						</view>
					</view>
					<view class="clanItem_rightInfo">
						<view class="clanItem_name">{{ item.genealogySurname }}氏一家人</view>
						<view>始祖: {{ item.ancestorName }}</view>
						<!-- <view>祖籍地: {{ handleAddress(item.ancestralHomeland) }}</view> -->
						<view class="clanItem_num">
							<text style="margin-right: 40rpx">人数: {{ item.totalNumber }}</text>
							<image
								style="margin-right: 4rpx"
								src="http://112.124.50.179:8888/imgs/home/boy.png"
							></image>
							<text style="margin-right: 32rpx">{{ item.manNumber }}</text>
							<image src="http://112.124.50.179:8888/imgs/home/girl.png"></image>
							{{ item.womanNumber }}
						</view>
					</view>
				</view>

				<view class="clanItem_btns">
					<view
						class="clanItem_btn"
						v-if="item.createUserId === userId"
						style="margin-right: 62rpx"
						@click="
							goUrl('/subPages/home/clan/create_clan?genealogyId=' + item.genealogyId)
						"
					>
						<image src="http://112.124.50.179:8888/imgs/home/clan_edit.png"></image>
						编辑
					</view>
					<view
						class="clanItem_btn clanItem_btn1"
						:style="{ width: item.createUserId === userId ? '248rpx' : '412rpx' }"
						@click="
							goUrl(
								`/subPages/home/clan/family?genealogySurname=${item.genealogySurname}&&genealogyId=${item.genealogyId}&&createUserId=${item.createUserId}`
							)
						"
					>
						<image src="http://112.124.50.179:8888/imgs/home/clan_go.png"></image>
						进入族谱
					</view>
				</view>
			</view>
		</view>
	</mescroll-uni>
	<!-- <view class="invite" @click="openInviteCodePopup" v-if="clanList.length > 0">
		<image src="http://112.124.50.179:8888/imgs/home/inviteCode.png"></image>
	</view> -->
	<InviteCodePopup ref="InviteCodePopupRef" :text="'族谱'" type="clan" @query="query" />
	<!-- 按钮弹框 -->
	<u-popup
		:show="showMoreFunc"
		bgColor="rgba(0,0,0,0)"
		@close="closeMore"
		custom-style="padding:0 16rpx 0;"
	>
		<u-button
			@click="copyInviteCode"
			shape="circle"
			:custom-style="{ ...moreBtnStyle, marginBottom: 0, borderRadius: '26rpx 26rpx 0 0' }"
		>
			复制邀请码
		</u-button>
		<u-button
			shape="circle"
			:custom-style="{ ...moreBtnStyle, borderRadius: ' 0 0 26rpx 26rpx' }"
			@click="delClan"
			v-if="currentClan.createUserId === userId"
		>
			删除族谱
		</u-button>
		<u-button
			shape="circle"
			:custom-style="{ ...moreBtnStyle, borderRadius: ' 0 0 26rpx 26rpx' }"
			@click="exitClan"
			v-else
		>
			退出族谱
		</u-button>
		<u-button
			shape="circle"
			:custom-style="{ ...moreBtnStyle, fontWeight: 600 }"
			@click="closeMore"
		>
			取消
		</u-button>
	</u-popup>

	<!-- 底部按钮 -->
	<view class="clan_footerBtn" v-if="clanList.length !== 0">
		<view class="footerBox"></view>
		<view class="footerFixed">
			<view class="footer_btn footer_btn2" @click="openInviteCodePopup">
				<image
					style="width: 40rpx; height: 40rpx; margin-right: 4rpx"
					src="http://112.124.50.179:8888/imgs/home/clan_invite.png"
					mode=""
				></image>
				填写邀请码
			</view>
			<view class="footer_btn" @click="goUrl('/subPages/home/clan/create_clan')">
				<image
					style="width: 40rpx; height: 40rpx; margin-right: 4rpx"
					src="http://112.124.50.179:8888/imgs/home/add_memory.png"
					mode=""
				></image>
				新建族谱
			</view>
		</view>
	</view>
</template>

<script setup>
import { onMounted, ref, reactive, nextTick } from 'vue';
import { onLoad, onReady, onShow } from '@dcloudio/uni-app';
import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll.js';
import navigatorComp from '/components/navigator/index.vue';
import myButton from '/components/button/index.vue';
import InviteCodePopup from '@/components/inviteCodePopup/index.vue';
import HomeApi from '@/API/home/index.js';
const homeApi = new HomeApi();

const { mescrollInit, downCallback, getMescroll } = useMescroll(); // 调用mescroll的hook
const downOption = ref({
	auto: false
});
const upOption = {
	auto: false,
	page: {
		size: 10 // 每页数据的数量
	},
	noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
	empty: {
		use: false //不显示空图
	}
};
const lastId = ref(0); //最后一个元素的id
const InviteCodePopupRef = ref();
const isMyclan = ref(false); //是我的族谱吗？
const clanList = ref([]); //族谱列表
const height = ref(0); //列表高度
const currentClan = ref({}); //点击更多的族谱id
const userId = uni.getStorageSync('userInfo').userId; //当前用户id

// 更多按钮
const showMoreFunc = ref(false);
const moreBtnStyle = {
	height: '120rpx',
	borderRadius: '26rpx 26rpx 26rpx 26rpx',
	backgroundColor: '#fff',
	fontWeight: '400',
	fontSize: '40rpx',
	color: '#007AFF',
	marginBottom: '16rpx'
};

onLoad(() => {
	// #ifdef MP-WEIXIN
	height.value =
		uni.getSystemInfoSync().windowHeight -
		getApp().globalData.bottom -
		getApp().globalData.navHeight -
		uni.upx2px(104);
	// #endif

	// #ifdef APP || H5
	height.value =
		uni.getSystemInfoSync().windowHeight -
		getApp().globalData.bottom -
		getApp().globalData.navHeight -
		uni.upx2px(88) -
		uni.upx2px(104);
	// #endif
});

onShow(() => {
	setTimeout(() => {
		myDownCallback();
	}, 1);
});

/**
 * 上拉加载
 */
const upCallback = (mescroll) => {
	homeApi
		.getGenealogyList({
			latestId: lastId.value
		})
		.then((res) => {
			const curPageData = res.data.genealogyList || []; // 当前页数据
			console.log(curPageData);
			if (lastId.value === 0) clanList.value = []; //如果是第一页需手动制空列表
			clanList.value = clanList.value.concat(curPageData); //追加新数据
			if (curPageData.length > 0) {
				lastId.value = curPageData[curPageData.length - 1].genealogyId;
			}
			mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载
		})
		.catch(() => {
			mescroll.endErr(); // 请求失败, 结束加载
		});
};

const myDownCallback = (mescroll) => {
	lastId.value = 0;
	downCallback();
};
const query = () => {
	setTimeout(() => {
		myDownCallback();
	}, 500);
};
const handleAddress = (address) => {
	return address.replace(/,/g, '');
};

const goUrl = (url) => {
	uni.navigateTo({
		url: url
	});
};
const openInviteCodePopup = () => {
	InviteCodePopupRef.value.inviteCodePopup.show = true;
};
/**
 * 点击更多
 */
const showMore = (item) => {
	showMoreFunc.value = true;
	currentClan.value = item;
};

const closeMore = () => {
	showMoreFunc.value = false;
};
const copyInviteCode = () => {
	uni.setClipboardData({
		data: currentClan.value.genealogyInvitationCode,
		success: function () {
			uni.showToast({
				title: '复制成功'
			});
			showMoreFunc.value = false;
		},
		fail: function (err) {
			console.log('复制失败', err);
		}
	});
};
/**
 * 删除族谱
 */
const delClan = () => {
	homeApi
		.deleteGenealogy({
			genealogyId: currentClan.value.genealogyId
		})
		.then((res) => {
			if (res.code === 0) {
				uni.showToast({
					title: '删除成功'
				});
				showMoreFunc.value = false;
				myDownCallback();
			}
		});
};

/**
 * 退出族谱
 */
const exitClan = () => {
	homeApi.quitAdministrators(currentClan.value.genealogyId).then((res) => {
		if (res.code === 0) {
			uni.showToast({
				title: '退出成功'
			});
			showMoreFunc.value = false;
			myDownCallback();
		}
	});
};
</script>

<style lang="scss">
.invite {
	position: absolute;
	bottom: 30vh;
	right: 12rpx;

	image {
		width: 120rpx;
		height: 104rpx;
	}
}

page {
	background-color: #121512;
	/* #ifdef H5 */
	padding-top: 0;
	/* #endif */
	overflow: hidden;
	box-sizing: border-box;
}

.edit {
	font-weight: 400;
	font-size: 32rpx;
	color: #f3e0bb;
	line-height: 32rpx;
	text-align: right;
}

.clan_empty_box {
	margin: 24rpx 32rpx;
	padding: 80rpx 0 64rpx 0;
	background: #292b2a;
	border-radius: 8rpx 8rpx 8rpx 8rpx;
	display: flex;
	align-items: center;
	flex-direction: column;

	.empty_img {
		width: 330rpx;
		height: 252rpx;
	}

	.empty_tip {
		font-weight: 400;
		font-size: 24rpx;
		color: #ffffff;
		line-height: 40rpx;
		text-align: center;
		margin: 48rpx 0 8rpx 0;
	}

	.empty_bottom {
		margin-top: 32rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		line-height: 40rpx;
		text-align: center;
	}

	.add_memory_image {
		width: 40rpx;
		height: 40rpx;
		margin-right: 4rpx;
	}
}

.clanList_box {
	padding: 24rpx 32rpx;

	.clanItem {
		width: 100%;
		background: linear-gradient(
			225deg,
			rgba(41, 43, 42, 0.3) 0%,
			rgba(138, 145, 142, 0.3) 100%
		);
		border-radius: 8rpx;
		box-sizing: border-box;
		padding: 32rpx 24rpx;
		margin-bottom: 24rpx;
		position: relative;

		.clanItem_more {
			width: 48rpx;
			height: 48rpx;
			right: 24rpx;
			top: 16rpx;
			position: absolute;
		}

		.imgBox {
			position: relative;
			margin-right: 32rpx;

			image {
				width: 168rpx;
				height: 240rpx;
			}

			.imgText {
				font-family: '宋体';
				font-weight: 600;
				font-size: 30rpx;
				color: #000000;
				line-height: 32rpx;
				position: absolute;
				top: 20rpx;
				right: 20rpx;
				writing-mode: vertical-lr;
			}

			.fuxinText {
				font-family: '宋体';
				font-weight: 600;
				font-size: 25rpx;
				color: #000000;
				top: 16rpx;
				right: 20rpx;
			}
		}

		.clanItem_rightInfo {
			height: 240rpx;
			padding: 4rpx 0 6rpx 0;
			box-sizing: border-box;
			font-weight: 400;
			font-size: 28rpx;
			color: #ececec;
			line-height: 33rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.clanItem_name {
				font-weight: 400;
				font-size: 36rpx;
				line-height: 42rpx;
				color: #ffffff;
			}

			.clanItem_num {
				display: flex;
				align-items: center;

				image {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}

		.clanItem_btns {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 48rpx;

			.clanItem_btn {
				width: 248rpx;
				height: 72rpx;
				border-radius: 48rpx 48rpx 48rpx 48rpx;
				border: 2rpx solid #f3e0bb;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: 500;
				font-size: 28rpx;
				color: #f3e0bb;
				line-height: 28rpx;

				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 8rpx;
				}
			}

			.clanItem_btn1 {
				border: none;
				background-color: #f3e0bb;
				color: #524630;
			}
		}
	}
}
.clan_footerBtn {
	width: 100%;
	z-index: 101 !important;

	.footerBox {
		width: 100%;
		height: calc(env(safe-area-inset-bottom) + 104rpx);
		background-color: #121512;
	}

	.footerFixed {
		position: fixed;
		background-color: #121512;
		bottom: 0;
		left: 0;
		width: 100%;
		/* #ifdef H5 */
		height: 120rpx;
		/* #endif */
		/* #ifndef H5 */
		height: calc(env(safe-area-inset-bottom) + 104rpx);
		/* #endif */
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 16rpx 32rpx;
		box-sizing: border-box;
	}

	.footer_btn {
		width: 328rpx;
		height: 88rpx;
		box-sizing: border-box;
		background: #f3e0bb;
		border-radius: 48rpx 48rpx 48rpx 48rpx;
		font-size: 32rpx;
		color: #524630;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.footer_btn2 {
		border: 2rpx solid #f3e0bb;
		background: none;
		color: #f3e0bb;
	}

	.footer_btn_inActive {
		opacity: 0.5;
	}
}
</style>
